<template>
	<view>
		<view class="img-wrap">
			<img src="@/static/images/logo.png" alt="" mode="widthFix">
		</view>
		<view class="input-wrap">
			<view v-if="isShow">
				<input type="text" placeholder="手机号/用户名" v-model="userName">
				<input type="text" placeholder="密码" v-model="userPwd">
			</view>
			<view v-if="!isShow" class="login-phone">
				<input type="text" placeholder="手机号" v-model="userNamePhone">
				<input type="text" placeholder="验证码" v-model="userPwdPhone">
				<view class="phone-code" @tap="getPhonecode">{{codeBtn.codeText}}</view>
			</view>
			<view>
				<view class="input-switch" @click="loginSwitch">{{loginWay}}</view>
				<view class="input-forget">忘记密码</view>
			</view>
		</view>
		<view class="login" @tap="submit" v-if="isShow">
			登录
		</view>
		<view class="login" @tap="submitPhone" v-if="!isShow">
			登录
		</view>
		<view class="register">
			注册
		</view>
		<view class="wechat-login" @tap="weixinLogin">
			<img src="@/static/images/wechat.png" alt="" mode="widthFix">
			<view>微信登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				loginWay: "短信验证码登陆",
				//用户输入内容
				userName: "",
				userPwd: "",
				userNamePhone: "",
				userPwdPhone: "",
				//验证规则
				rules: {
					userName: {
						rule:/\S/,
						msg: "账号不能为空"
					},
					userPwd: {
						rule: /^[0-9a-zA-Z]{6,16}$/,
						msg: "密码应该为6-16位"
					},
					userNamePhone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					userPwdPhone: {
						rule: /^[0-9]{6}$/,
						msg: "请输入6位数字验证码"
					}
				},
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				}
			}
		},
		methods:{
			//切换登录方式
			loginSwitch() {
				this.isShow = !this.isShow
				if(this.isShow) {
					this.loginWay = "短信验证码登陆"
				}else{
					this.loginWay = "账号密码登陆"
				}
			},
			//账号密码点击登录
			submit() {
				if(!this.validate('userName')) return;
				if(!this.validate("userPwd"))  return;
				uni.showLoading({
					title:"登录中..."
				});
				//向服务器发送登陆请求
				setTimeout(()=>{
					//隐藏登录状态
					uni.hideLoading();
					uni.navigateBack({
						delta:1
					})
				},2000)
			},
			//判断验证是否符合要求，合法性校验
			validate(key){
				let bool=true;
				if(!this.rules[key].rule.test(this[key])){
					//提示信息
					uni.showToast({
						title:this.rules[key].msg,
					})
					//取反
					bool=false;
					return false;
				}
				return bool;
			},
			//手机验证码登录	
			submitPhone() {
				if(!this.validate('userNamePhone')) return;
				if(!this.validate("userPwdPhone"))  return;
				//向服务器发送登陆请求
				uni.request({
					url: 'http://.....',//接口地址
					data: {
						user_MobilePhone: this.userNamePhone,
						user_Password: this.userPwdPhone
					},
					method: "POST",
					success: (res) => {
						console.log("之前的数据状态" + "账号：" + this.userNamePhone + "密码：" + this.userPwdPhone)
						let list = JSON(stringify(res.data))
						console.log("数据状态:" + list)
						if(list == "[]"){
							uni.showToast({
								icon: 'none',
								title: '用户名密码错误'
							})
							return
						}
						uni.showToast({
							icon: "none",
							title: "登陆成功"
						})
						uni.switchTab({
							url: "../course/index"
						})
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			//获取验证码按钮点击计时事件
			getPhonecode() {
				if(this.validate('userNamePhone') && this.codeBtn.codeStatus) {
					this.codeBtn.codeStatus = false
					let timerId = setInterval(() => {
						let codetime = this.codeBtn.codeTime
						codetime--
						this.codeBtn.codeTime = codetime
						this.codeBtn.codeText = codetime + "s"
						if(codetime < 1) {
							clearInterval(timerId)
							this.codeBtn.codeText = "重新获取"
							this.codeBtn.codeTime = 60
							this.codeBtn.codeStatus = true
						}
					},1000)
				}
			},
			//微信登录
			weixinLogin() {
				uni.getProvider({
				    service: 'oauth',
				    success: function (res) {
				        console.log(res.provider)
				        if (~res.provider.indexOf('weixin')) {
				            uni.login({
				                provider: 'weixin',
				                success: (loginRes) => {
				                    console.log(JSON.stringify(loginRes));
									uni.showLoading({
										title:"登录中..."
									});
									setTimeout(()=>{
										//隐藏登录状态
										uni.hideLoading();
										// 返回个人中心
										uni.navigateBack({
											delta:1
										})
									},2000)
				                },
								fail: () => {
									uni.showToast({
										icon: "none",
										title: "登录失败"
									})
								}
				            });
				        }
				    }
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '@/static/css/varibles.styl'
	.img-wrap
		text-align:center
		margin-top:30rpx
		img
			width:140rpx
	.input-wrap
		width:auto
		padding:0 90rpx
		height:300rpx
		input 
			border-bottom:1rpx solid #ddd
			height:80rpx
			line-height:80rpx
			margin-top:20rpx
		.login-phone 
			position:relative
			.phone-code 
				z-index:2
				position:absolute
				top:15rpx
				right:0
				font-size:20rpx
				background:#1296db
				color:#fff
				padding:10rpx 20rpx
				border-radius:10rpx
		.input-switch
		.input-forget
			float:left
			font-size:30rpx
			color:$bgColor
			margin-top:20rpx
		.input-forget
			float:right
	.login
	.register
		width:auto
		margin:0 90rpx
		background:#1296db
		height:80rpx
		line-height:80rpx
		border-radius:20rpx
		text-align:center
		color:#fff
		font-size:34rpx
		margin-bottom:30rpx
	.register
		background:#eee
		color:#666
	.wechat-login
		width:150rpx
		height:150rpx
		margin:0 auto
		margin-top:70rpx
		text-align:center
		img 
			width:80rpx
		view 
			font-size:20rpx
			color:#bbb
</style>
